<template>
  <div class="workflows">
    <h1>工作流列表</h1>
    <el-table :data="workflows" style="width: 100%" v-loading="loading">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="created_at" label="创建时间">
        <template #default="scope">
          {{ new Date(scope.row.created_at).toLocaleDateString('zh-CN') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <router-link :to="`/workflow/${scope.row._id}`">
            <el-button type="primary" size="small">编辑</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
   <!-- <div class="workflow-grid">
      <div v-for="workflow in workflows" :key="workflow._id" class="workflow-card">
        <img :src="workflow.preview_image || '/placeholder.jpg'" :alt="workflow.name">
        <h3>{{ workflow.name }}</h3>
        <p>{{ workflow.description }}</p>
        <router-link :to="`/workflow/${workflow._id}`" class="btn">查看详情</router-link>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

interface Workflow {
  _id: string;
  name: string;
  description: string;
  preview_image?: string;
  category: string;
  workflow_json: any;
  param_schema: any;
  created_at: Date;
  updated_at: Date;
}

const workflows = ref<Workflow[]>([])

onMounted(async () => {
  try { 
    const response = await axios.get<Workflow[]>('http://localhost:3000/api/workflows')
    workflows.value = response.data
  } catch (error) {
    console.error('Error fetching workflows:', error)
  }
})
</script>

<style scoped>
.workflows {
  padding: 20px;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.workflow-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.2s;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 10px;
}

.btn:hover {
  background-color: #45a049;
}
</style> 